<template>
	<s-layout :title="state.model.id ? '编辑发票' : '添加发票'">
		<view class="container-wrap">
			<uni-forms ref="invoiceFormRef" v-model="state.model" :rules="state.rules" validateTrigger="bind"
				labelWidth="160" labelAlign="left" border :labelStyle="{ fontWeight: 'bold' }">
				<view class="bg-white form-box ss-p-x-30">
					<uni-forms-item name="type" label="发票类型">
						<view class="ss-flex ss-col-center ss-h-100">
							<radio-group @change="onChange" class="ss-flex ss-col-center">
								<label class="radio" v-for="item in invoiceTypeList" :key="item.value">
									<view class="ss-flex ss-col-center ss-m-r-32">
										<radio :value="item.value" color="var(--ui-BG-Main)"
											style="transform: scale(0.8)" :checked="item.value === state.model.type" />
										<view class="radio-name">
											{{ item.name }}
										</view>
									</view>
								</label>
							</radio-group>
						</view>
					</uni-forms-item>
					<view v-if="state.model.type === 'person'">
						<uni-forms-item name="invoice_title" label="发票名称">
							<uni-easyinput v-model="state.model.name" type="text" placeholder="请输入发票名称"
								placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
								:inputBorder="false"></uni-easyinput>
						</uni-forms-item>
						<uni-forms-item name="invoice_title" label="发票抬头">
							<uni-easyinput v-model="state.model.invoice_title" type="text" placeholder="请输入发票抬头"
								placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
								:inputBorder="false"></uni-easyinput>
						</uni-forms-item>
						<uni-forms-item name="invoice_content" label="发票内容">
							<uni-easyinput v-model="state.model.invoice_content" type="number" placeholder="请输入发票内容"
								placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
								:inputBorder="false"></uni-easyinput>
						</uni-forms-item>
						<uni-forms-item name="invoice_remark" label="备注信息">
							<uni-easyinput v-model="state.model.invoice_remark" type="number"
								placeholder="内容将会显示在发票上(非必填)"
								placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
								:inputBorder="false"></uni-easyinput>
						</uni-forms-item>
						<uni-forms-item name="invoice_remark" label="发票金额">
							<view class="money-box">
								{{state.model.invoice_amount}}
								<text class="tips-text">元</text>
							</view>
						</uni-forms-item>
					</view>
					<view v-if="state.model.type === 'company'">
						<uni-forms-item name="name" label="单位名称">
							<uni-easyinput v-model="state.model.name" type="text" placeholder="请输入单位名称(必填)"
								placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
								:inputBorder="false"></uni-easyinput>
						</uni-forms-item>
						<uni-forms-item name="invoice_title" label="发票抬头">
							<uni-easyinput v-model="state.model.invoice_title" type="text" placeholder="请输入发票抬头"
								placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
								:inputBorder="false"></uni-easyinput>
						</uni-forms-item>
						<uni-forms-item name="tax_no" label="税号">
							<uni-easyinput v-model="state.model.tax_no" type="text" placeholder="请输入单位税号(必填)"
								placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
								:inputBorder="false"></uni-easyinput>
						</uni-forms-item>
						<uni-forms-item name="invoice_content" label="发票内容">
							<uni-easyinput v-model="state.model.invoice_content" type="number" placeholder="请输入发票内容"
								placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
								:inputBorder="false"></uni-easyinput>
						</uni-forms-item>
						<uni-forms-item name="invoice_remark" label="备注信息">
							<uni-easyinput v-model="state.model.invoice_remark" type="number"
								placeholder="内容将会显示在发票上(非必填)"
								placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
								:inputBorder="false"></uni-easyinput>
						</uni-forms-item>
						<uni-forms-item name="invoice_remark" label="发票金额">
							<view class="money-box">
								{{state.model.invoice_amount}}
								<text class="tips-text">元</text>
							</view>
						</uni-forms-item>
						<!-- <uni-forms-item name="mobile" label="手机号">
							<uni-easyinput v-model="state.model.mobile" type="number" placeholder="请输入手机号(必填)"
								placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
								:inputBorder="false"></uni-easyinput>
						</uni-forms-item> -->
						
					<!-- 	<uni-forms-item name="bank_name" label="开户银行">
							<uni-easyinput v-model="state.model.bank_name" type="text" placeholder="请输入对公账户开户银行"
								placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
								:inputBorder="false"></uni-easyinput>
						</uni-forms-item>
						<uni-forms-item name="bank_no" label="银行账号">
							<uni-easyinput v-model="state.model.bank_no" type="text" placeholder="请输入对公账户银行账号"
								placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
								:inputBorder="false"></uni-easyinput>
						</uni-forms-item>
						<uni-forms-item name="address" label="详细地址" :formItemStyle="{ alignItems: 'flex-start' }"
							:labelStyle="{ lineHeight: '5em' }" class="textarea-item">
							<uni-easyinput :inputBorder="false" type="textarea" v-model="state.model.address"
								placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
								placeholder="请输入详细地址" clearable></uni-easyinput>
						</uni-forms-item> -->
					</view>
				</view>
			</uni-forms>
				<view class="email-wrap">
					<view class="email-info">
						接收方式
					</view>
					<view class="email-box">
						<uni-forms-item name="receive_address" label="邮箱地址">
							<uni-easyinput v-model="state.model.receive_address" type="text" placeholder="用于接收电子发票"
								placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
								:inputBorder="false"></uni-easyinput>
						</uni-forms-item>
					</view>
				</view>
			<view class="tips-box">
				<view class="tips-title-header">开票说明</view>
				<view class="tips-title">·发票会在提交后3个工作日内开出</view>
				<view class="tips-title">·一次开具多笔订单的发票时，按会员合并开票</view>
				<view class="tips-title">·如有疑问，请<text class="color-box"
						@click="state.showPlatformManager=true">联系管家</text> </view>
			</view>
			<su-fixed bottom :opacity="false" bg="" placeholder :noFixed="false" :index="10">
				<view class="footer-box ss-flex ss-row-between ss-col-center ss-p-20">
					<button v-if="state.model.id" class="ss-reset-button delete-btn" @tap="onDelete">删除</button>
					<button class="ss-reset-button save-btn ui-Shadow-Main" @tap="onSave">保存</button>
				</view>
			</su-fixed>
			<!-- 平台管家弹框 -->
			<view class="custom-popup-overlay" v-if="state.showPlatformManager" @click="handleClosePopup">
				<view class="custom-popup-content" @click.stop>
					<!-- 背景图 -->
					<view class="dialog-bg-image"></view>
					<!-- 标题 -->
					<view class="dialog-title">平台管家</view>

					<!-- 二维码区域 -->
					<view class="qr-code-section">
						<view class="qr-code-wrapper">
							<image src="https://wemayshiguang.oss-cn-shanghai.aliyuncs.com/qrCode.png" mode="aspectFit"
								class="qr-code-img"></image>
						</view>
					</view>

					<!-- 提示文字 -->
					<view class="instruction-text">
						<text class="scan-text">扫描上方二维码</text>
						<text class="add-text">添加平台管家微信</text>
					</view>

					<!-- 确认按钮 -->
					<view class="confirm-button" @click="handleClosePopup">
						<text class="btn-text">我知道了</text>
					</view>
				</view>
			</view>

		</view>


	</s-layout>
</template>

<script setup>
	import { computed, watch, ref, reactive, unref } from 'vue';
	import sheep from '@/sheep';
	import { onLoad, onPageScroll } from '@dcloudio/uni-app';
	import _ from 'lodash';
	import { realName, mobile, taxNo, taxName, receive_address } from '@/sheep/validate/form';

	const invoiceFormRef = ref(null);
	const invoiceTypeList = [{
			name: '企/事业单位',
			value: 'company',
		},
		{
			name: '个人',
			value: 'person',
		}

	];
	const state = reactive({
		model: {
			type: '',
			name: '',
			mobile: '',
			tax_no: '',
			bank_name: '',
			bank_no: '',
			address: '',
			invoice_title: '', //发票抬头
			invoice_content: '', //发票内容
			invoice_amount: '', // 发票金额
			receive_address: ''
		},
		rules: {
			invoice_title: taxName,
			mobile,
			tax_no: taxNo,
			receive_address
		},
		showPlatformManager: false
	});

	//发票
	function onChange(e) {
		state.model.type = e.detail.value;
	}
	const handleClosePopup = () => {
		state.showPlatformManager = false
	}
	const onSave = async () => {
		const validate = await unref(invoiceFormRef)
			.validate()
			.catch((error) => {
				console.log('error: ', error);
			});
		if (!validate) return;
		if(!state.model.receive_address){
			sheep.$helper.toast('请输入邮箱地址');
			return 
		}
		let res = null;
		if (state.model.id) {
			res = await sheep.$api.user.invoice.update(state.model.id, state.model);
		} else {
			res = await sheep.$api.user.invoice.create(state.model);
		}
		if (res.code === 1) {
			sheep.$router.back();
		}
	};
	const onDelete = () => {
		uni.showModal({
			title: '提示',
			content: '确认删除此发票信息吗？',
			success: async function(res) {
				if (res.confirm) {
					const { code } = await sheep.$api.user.invoice.delete(state.model.id);
					if (res.code === 1) {
						sheep.$router.back();
					}
				}
			},
		});
	};
	onLoad(async (options) => {
		if (options.id) {
			let res = await sheep.$api.user.invoice.detail(options.id);
			if (res.code === 1) {
				state.model = {
					...state.model,
					...res.data,
				};
				console.log('can', res.data)
			}
		} else {
			state.model.invoice_amount = options.invoice_amount
			state.model.type = 'person';
		}

		// 处理订单数据回显
		if (options.orderData) {
			const orderData = JSON.parse(options.orderData);
			console.log('发票编辑页面接收到的订单数据:', orderData);
			
			// 根据订单数据回显相关信息
			if (orderData.user_name) {
				state.model.name = orderData.user_name;
			}
			if (orderData.user_mobile) {
				state.model.mobile = orderData.user_mobile;
			}
			if (orderData.address && orderData.address.address) {
				state.model.receive_address = orderData.address.address;
			}
			
			// 设置发票金额
			if (orderData.order_amount) {
				state.model.invoice_amount = orderData.order_amount;
			}
			
			// 设置发票内容（可以根据商品信息生成）
			if (orderData.items && orderData.items.length > 0) {
				const goodsNames = orderData.items.map(item => item.goods_title).join('、');
				state.model.invoice_content = goodsNames;
			}
		}

		if (options.data) {
			let data = JSON.parse(options.data);
			state.model = {
				...state.model,
				...data,
			};
		}
	});
</script>

<style lang="scss" scoped>
	.flex-between {
		padding: 0 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
	}

	.container-wrap {
		padding: 20rpx;
	}

	.money-box {
		flex: 1;
		text-align: end;
		font-family: Arial, Arial;
		font-weight: 400;
		font-size: 36rpx;
		margin-top: 10rpx;
		color: #FF7C00;
	}

	.email-info {
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 32rpx;
		color: #333333;
		line-height: 32rpx;
		padding: 20rpx;
	}

	.email-box {
		padding-left: 20rpx;
	}

	.tips-text {
		font-size: 28rpx;
		color: #999999;
	}

	.tips-box {
		padding: 30rpx;

	}

	.tips-title-header {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #333333;
	}

	.color-box {
		color: #FF7C00;
	}

	.email-wrap {
		background: #fff;
		margin: 20rpx 0;
	}

	.tips-title {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
		line-height: 34rpx;
	}

	// 自定义弹框样式
	.custom-popup-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
		z-index: 9999;
		display: flex;
		align-items: center;
		justify-content: center;
		animation: fadeIn 0.3s ease;
	}

	.custom-popup-content {
		width: 700rpx;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: url('https://wemayshiguang.oss-cn-shanghai.aliyuncs.com/qrCodeBg.png') no-repeat center center;
		background-size: contain;
		z-index: 1;
		border-radius: 24rpx;
		position: relative;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0;
		box-sizing: border-box;
		animation: slideIn 0.3s ease;
	}

	.dialog-bg-image {}

	.close-btn {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		width: 60rpx;
		height: 60rpx;
		background: rgba(255, 255, 255, 0.9);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 10;
		backdrop-filter: blur(10rpx);
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		transition: all 0.3s ease;
	}

	.close-btn:active {
		transform: scale(0.9);
		background: rgba(255, 255, 255, 1);
	}

	.close-icon {
		font-size: 40rpx;
		color: #666666;
		font-weight: 300;
		line-height: 1;
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	@keyframes slideIn {
		from {
			transform: scale(0.8);
			opacity: 0;
		}

		to {
			transform: scale(1);
			opacity: 1;
		}
	}

	.dialog-title {
		position: relative;
		z-index: 2;
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 30rpx;
		color: #333333;
		margin-top: 170rpx;
		text-align: center;
		text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
		letter-spacing: 2rpx;
	}

	.qr-code-section {
		position: relative;
		z-index: 2;
		text-align: center;
		margin-bottom: 20rpx;
	}

	.qr-code-wrapper {

		border-radius: 20rpx;
		padding: 20rpx;

		display: inline-block;
		backdrop-filter: blur(10rpx);
	}

	.qr-code-img {
		width: 360rpx;
		height: 360rpx;
		display: block;
		border-radius: 12rpx;
	}

	.instruction-text {
		position: relative;
		z-index: 2;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16rpx;
		margin-bottom: 40rpx;
	}

	.scan-text {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		text-align: center;
		text-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.15);
		letter-spacing: 1rpx;
	}

	.add-text {
		font-family: PingFang SC, PingFang SC;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
		text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.1);
	}

	.confirm-button {
		position: relative;
		z-index: 2;
		width: 540rpx;
		height: 100rpx;
		background: linear-gradient(135deg, #FF7C00 0%, #FF9500 100%);
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: none;
		transition: all 0.3s ease;
		margin-bottom: 80rpx;
		box-shadow: 0 16rpx 40rpx rgba(255, 124, 0, 0.4);
		backdrop-filter: blur(10rpx);
	}

	.confirm-button:active {
		transform: scale(0.95);
		background: linear-gradient(135deg, #e67000 0%, #e68500 100%);
		box-shadow: 0 8rpx 20rpx rgba(255, 124, 0, 0.4);
	}

	.btn-text {
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 28rpx;
		color: #FFFFFF;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
		letter-spacing: 2rpx;
	}

	.user-wrap {
		min-height: 100vh;
		background: #F8F8F8;
	}

	.vip-img {
		width: 142rpx;
		height: 36rpx !important;
		display: block;
	}

	.main-bg {
		height: 300rpx;
		background: url('https://wemayshiguang.oss-cn-shanghai.aliyuncs.com/bg.png') no-repeat 0 0;
		background-size: cover;
	}

	.main-info {
		padding: 80rpx 30rpx 0;
		display: flex;
		justify-content: space-between;
	}

	.main-user {
		display: flex;
		align-items: center;

	}

	.tui-avatar {
		width: 128rpx;
		height: 128rpx;
		border-radius: 50%;
		display: block;
	}

	.user-flex {
		display: flex;
		align-items: center;
	}

	:deep() {
		.uni-forms-item__label .label-text {
			font-size: 28rpx !important;
			color: #333333 !important;
			line-height: normal !important;
		}

		.uni-easyinput__content-input {
			font-size: 28rpx !important;
			color: #333333 !important;
			line-height: normal !important;
			padding-left: 0 !important;
		}

		.uni-easyinput__content-textarea {
			font-size: 28rpx !important;
			color: #333333 !important;
			line-height: normal !important;
			margin-top: 4rpx;
		}

		.uni-icons {
			font-size: 40rpx !important;
		}

		.is-textarea-icon {
			margin-top: 14rpx;
		}

		.is-disabled {
			color: #333333;
		}
	}

	.footer-box {
		.save-btn {
			flex: 1;
			height: 80rpx;
			border-radius: 8rpx;
			background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
			color: $white;
			margin-left: 10rpx;
		}

		.delete-btn {
			flex: 1;
			height: 80rpx;
			background:#fff;
			border-radius: 5px 5px 5px 5px;
			border: 1px solid #FF7C00;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #FF7C00;
			margin-right: 10rpx;
		}
	}
</style>